<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>shopping-cart</title>
    <link rel="stylesheet" href="./css/shop.css">
    <script src="./model.js"></script>
</head>

<body>
    <table class="shop">
        <tbody class="shopS">
            <tr class="nav">
                <th class="Son1">Your Item(s)</th>
                <th class="Son2">Quantity</th>
                <th class="Son3">Price</th>
                <th class="Son4">Total Price</th>
                <th class="Son5">Remove</th>
            </tr>
            <!-- <tr class="shopList">
                <td class="imgTd"><img class="shops" src="./img/vans.jpg" alt="" srcset=""></td>
                <td class="titleTd">
                    <h6>Vans范斯 经典系列 Old Skool板鞋运动鞋 低帮经典款男女官方正品</h6>
                    <span>ID:#2001</span>
                    <span>Size:37</span>
                </td>
                <td class="Son2">
                    <span class="reduce">-</span>
                    <input type="text" value="1" class="count">
                    <span class="add">+</span>
                </td>
                <td class="Son3">
                    <del class="oriPrice">399.99 py6</del>
                    <b class="nowPrice">299.98 py6</b>
                </td>
                <td class="Son4">
                    <span class="priceAll">399.99 py6</span>
                    <span class="saveAll">You save 100.01 py6</span>
                </td>
                <td class="Son5">
                    <img class="del" src="./img/del.png" alt="">
                </td>
            </tr> -->
        </tbody>
    </table>
    <div class="total">
        <p>Cart Total:<span class="totalmoney"></span> py6</p>
        <p>Your TotalSaving:<span class="totalsaving"></span> py6</p>
    </div>
    <script>
        var shopS = document.querySelector('.shopS');
        var res = lists.map(function (item, index) {
            //渲染页面
            return `<tr class="shopList">
                <td class="imgTd"><img class="shops" src="./img/${item.img}" alt="" srcset=""></td>
                <td class="titleTd">
                    <h6>${item.title}</h6>
                    <span>ID:#${item.id}</span>
                    <span>Size:${item.size}</span>
                </td>
                <td class="Son2">
                    <span class="reduce">-</span>
                    <input type="text" value="1" class="count">
                    <span class="add">+</span>
                </td>
                <td class="Son3">
                    <del class="oriPrice">${item.oriPrice} py6</del>
                    <b class="nowPrice">${item.nowPrice} py6</b>
                </td>
                <td class="Son4">
                    <span class="priceAll">${item.oriPrice} py6</span>
                    <span class="saveAll">You save ${(item.oriPrice - item.nowPrice).toFixed(2)} py6</span>
                </td>
                <td class="Son5">
                    <img class="del" src="./img/del.png" alt="">
                </td>
            </tr>`
        }).join('');
        shopS.innerHTML = res;

        var shopList = document.querySelectorAll('.shopList');
        var count = document.querySelector('.count');
        var oriPrice = document.querySelector('.oriPrice');
        var nowPrice = document.querySelector('.nowPrice');
        var priceAll = document.querySelector('.priceAll');
        var saveAll = document.querySelector('.saveAll');
        var Son4 = document.querySelectorAll('.Son4');
        var totalmoney = document.querySelector('.totalmoney');
        var totalsaving = document.querySelector('.totalsaving');
        var temp1 = 0, temp2 = 0;
        //初始化是计算总金额
        shopList.forEach(function (items, idx) {
            //获取每一个商品的现价
            var num1 = (items.children[3].lastElementChild.innerHTML.split(' ')[0] * 1);
            //获取每一个商品的节省金额
            var num2 = items.children[4].lastElementChild.innerHTML.slice(8, 15) * 1;
            //每一个商品两项总价
            temp1 += num1;
            temp2 += num2;
        });
        //初始化购物车总金额
        totalmoney.innerHTML = temp1.toFixed(2);
        //初始化时购物车节省总金额
        totalsaving.innerHTML = temp2.toFixed(2);

        //点击事件（委托事件）
        shopS.onclick = function (e) {
            var event = e.target;
            // console.log(e.target.className)
            //点击加号时的操作
            if (event.innerHTML == '+') {
                //获取原价
                var a = event.parentNode.nextElementSibling.firstElementChild.innerHTML;
                var oriPriceValue = a.split(' ')[0] * 1;
                //获取现价
                var b = event.parentNode.nextElementSibling.lastElementChild.innerHTML;
                var nowPriceValue = b.split(' ')[0] * 1;
                //更新数量
                event.previousElementSibling.value = parseInt(event.previousElementSibling.value) + 1;
                //计算该商品总价
                event.parentNode.nextElementSibling.nextElementSibling.firstElementChild.innerHTML = (oriPriceValue * event.previousElementSibling.value).toFixed(2) + ' py6';
                //计算该商品总节省钱
                event.parentNode.nextElementSibling.nextElementSibling.lastElementChild.innerHTML = 'You save ' + ((oriPriceValue - nowPriceValue) * event.previousElementSibling.value).toFixed(2) + ' py6';
                //计算购物车总价
                totalmoney.innerHTML = (totalmoney.innerHTML * 1 + nowPriceValue).toFixed(2);
                //计算购物车节省总价
                totalsaving.innerHTML = (totalsaving.innerHTML * 1 + (oriPriceValue - nowPriceValue)).toFixed(2);
            }
            //点击减号时的操作
            if (event.innerHTML == '-' && event.nextElementSibling.value > 0) {
                //获取原价
                var a = event.parentNode.nextElementSibling.firstElementChild.innerHTML;
                var oriPriceValue = a.split(' ')[0] * 1;
                //获取现价
                var b = event.parentNode.nextElementSibling.lastElementChild.innerHTML;
                var nowPriceValue = b.split(' ')[0] * 1;
                //更新数量
                event.nextElementSibling.value = parseInt(event.nextElementSibling.value) - 1;
                //计算该商品总价
                event.parentNode.nextElementSibling.nextElementSibling.firstElementChild.innerHTML = (oriPriceValue * event.nextElementSibling.value).toFixed(2) + ' py6';
                //计算该商品总节省钱
                event.parentNode.nextElementSibling.nextElementSibling.lastElementChild.innerHTML = 'You save ' + ((oriPriceValue - nowPriceValue) * event.nextElementSibling.value).toFixed(2) + ' py6';
                //计算购物车总价
                totalmoney.innerHTML = (totalmoney.innerHTML * 1 - nowPriceValue).toFixed(2);
                //计算购物车节省总价
                totalsaving.innerHTML = (totalsaving.innerHTML * 1 - (oriPriceValue - nowPriceValue)).toFixed(2);
            }
            //点击删除时候的操作
            if (event.className == 'del') {
                //获取该行的数量
                var num3 = event.parentNode.previousElementSibling.previousElementSibling.previousElementSibling.children[1].value * 1;
                //获取旧价格
                var num4 = event.parentNode.previousElementSibling.previousElementSibling.firstElementChild.innerHTML.split(' ')[0] * 1;
                //获取现在单价
                var num5 = event.parentNode.previousElementSibling.previousElementSibling.lastElementChild.innerHTML.split(' ')[0] * 1;
                //弹窗提醒
                var jieguo = confirm('确认删除吗？');
                if (jieguo) {
                    //计算删除的总金额
                    var totaldelmoney = (num3 * num5).toFixed(2);
                    totalmoney.innerHTML = (totalmoney.innerHTML * 1 - totaldelmoney).toFixed(2);
                    //计算删除节省的总金额
                    var savingdelmoney = (num3 * (num4 - num5)).toFixed(2);
                    totalsaving.innerHTML = (totalsaving.innerHTML * 1 - savingdelmoney).toFixed(2);
                    //删除该商品
                    event.parentNode.parentNode.remove();
                }
            }
            if (totalmoney.innerHTML == 0) {
                alert('购物车空空如也，快去选购吧！');
            }
        }
    </script>
</body>

</html>